import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Dimensions,
  TouchableHighlight,
  ScrollView,
  Image,
} from "react-native";
import React, { useEffect, useState } from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import { Tabs } from "@ant-design/react-native";
import axios from "axios";
import Api from '../Api/api'
import { router } from "expo-router";
export default function Oncologist() {
  useEffect(() => {
    getlearning();
  }, []);
  const [text, onChangeText] = useState("");
  const [state, setState] = useState(false); //控制搜索框的显示
  const tabs = [{ title: "精彩幻灯" }, { title: "文献指南" }];
  const [learning, setlearning] = useState([]); //存储数据
  let getlearning = async () => {
    try {
      let {
        data: { data },
      } = await Api.get("/yg/getleanring");
      setlearning(data);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <View style={styles.container}>
      {/* 搜索 */}
      {state ? (
        <>
          <View style={styles.searchbox}>
            <View style={styles.searchinput}>
              <Ionicons name="search-outline" size={18} color={"#ccc"} />
              <TextInput
                style={styles.input}
                onChangeText={onChangeText}
                value={text}
                placeholder="搜索"
              />
            </View>
          </View>
        </>
      ) : (
        <>
          <View style={styles.searchbox}>
            <TouchableHighlight
              onPress={() => {
                setState(true);
              }}
            >
              <View style={styles.search}>
                <Ionicons name="search-outline" size={24} color={"#ccc"} />
                <Text style={{ marginLeft: 10, color: "#ccc" }}>搜索</Text>
              </View>
            </TouchableHighlight>
          </View>
        </>
      )}
      {/* 主题内容 */}
      <Tabs tabs={tabs}>
        <View>
          <ScrollView>
            {learning
              .filter((item) => item.learningcate?.learningcate === "精彩幻灯")
              .map((item) => (
                <TouchableHighlight
                  onPress={() => {
                    router.push({
                      pathname: "/YgFile/Descist",
                      params: { title: item.learningname,id:item.academic._id },
                    });
                  }}
                >
                  <View key={item._id} style={styles.box}>
                    <Image
                      style={styles.boxItem}
                      source={{ uri: item.learningimg }}
                    />
                    <View style={styles.boxbig}>
                      <Text style={styles.title}>{item.learningname}</Text>
                      <Text style={styles.context}>
                        大小{item.size} 下载:{item.num}
                      </Text>
                    </View>
                  </View>
                </TouchableHighlight>
              ))}
          </ScrollView>
        </View>
        <View>
          <ScrollView>
            {learning
              .filter((item) => item.learningcate?.learningcate === "文献指南")
              .map((item) => (
                <TouchableHighlight
                onPress={() => {
                  router.push({
                    pathname: "/YgFile/Descist",
                    params: { title: item.learningname,id:item.academic._id },
                  });
                }}
                >
                  <View key={item._id} style={styles.Learn}>
                    <Text style={styles.contitle}>{item.learningname}</Text>
                    <Text style={styles.context}>
                      2019年5月，美国国家综合症网络(NCCN)发布了急性髓性白血
                      病指南2019年第3版
                    </Text>
                  </View>
                </TouchableHighlight>
              ))}
          </ScrollView>
        </View>
      </Tabs>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchbox: {
    width: Dimensions.get("window").width,
    height: 70,
    alignItems: "center",
    justifyContent: "center",
  },
  search: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  searchinput: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  input: {
    height: 40,
    width: "90%",
  },
  main: {
    width: Dimensions.get("window").width,
  },
  box: {
    width: Dimensions.get("window").width,
    height: 100,
    flexDirection: "row",
    backgroundColor: "#FFF",
    marginTop: 10,
  },
  boxItem: {
    width: 90,
    height: 90,
    marginLeft: 10,
    marginTop: 5,
  },
  boxbig: {
    width: Dimensions.get("window").width - 100,
    height: 100,
  },
  title: {
    paddingLeft: 10,
    fontWeight: "bold",
    fontSize: 16,
    marginTop: 20,
  },
  context: {
    paddingLeft: 10,
    marginTop: 22,
    color: "#ccc",
  },
  Learn: {
    width: Dimensions.get("window").width,
    height: 100,
    backgroundColor: "#FFF",
    marginTop: 10,
    justifyContent: "center",
  },
  contitle: {
    fontWeight: "bold",
    fontSize: 16,
    textAlign: "center",
  },
});
